<template>
  <view class="content">
    <view class="sleep-complete">
      <text class="text-blue text-sl">完成\n</text>
      <text class="text-gray text-xl">{{date}}{{week}}</text>
    </view>
    <view class="sleep-massage">
      <view class="user-info">
        <view class="user-info-img">
			<!-- avatar:头像 -->
          <image class="img" :src="userInfo.avatarUrl || '/static/profilePicture.jpg'"></image>
        </view>
        <text class="text-xl text-bold text-center">{{userInfo.nickName || '游客'}}</text>
      </view>
      <view class="fall-asleep">
        <text class="text-lg text-gray">入睡时间</text>
        <text class="text-sl">{{startSleepTime}}</text>
      </view>
      <view class="wake-up">
        <text class="text-lg text-gray">醒来时间</text>
        <text class="text-sl">{{endSleepTime}}</text>
      </view>
      <view class="nap">
        <text class="text-lg text-gray">小睡时间</text>
        <text class="text-sl">{{sleepTime || 0}}min</text>
      </view>
    </view>

    <view class="back-home">
      <view class="btn" @click="jumpToMonitor">
        <text class="text-bold text-white">返回首页</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        date: "",
        week: "",
        startSleepTime: "",
        endSleepTime: "",
        sleepTime: 1,
		userInfo:{}
      };
    },
	onShow() {
		// getStorageSync：获取缓存
		let user = uni.getStorageSync('user');
		this.userInfo = user;
	},
    methods: {
      jumpToMonitor() {
        uni.switchTab({
          url: "/pages/monitor/monitor",
        });
      },

      //获取当前时间
      getNowTime() {
        let uni = this;
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        uni.date = year + "." + month + "." + day + " ";
        if (date.getDay() == 0) {
          uni.week = "星期天";
        } else if (date.getDay() == 1) {
          uni.week = "星期一";
        } else if (date.getDay() == 2) {
          uni.week = "星期二";
        } else if (date.getDay() == 3) {
          uni.week = "星期三";
        } else if (date.getDay() == 4) {
          uni.week = "星期四";
        } else if (date.getDay() == 5) {
          uni.week = "星期五";
        } else if (date.getDay() == 6) {
          uni.week = "星期六";
        }
      }
    },
    onLoad(option) {
      this.getNowTime();
      this.startSleepTime = option.startSleepTime;
      this.endSleepTime = option.endSleepTime;
      option.sleepTime = Math.round(option.sleepTime / 60);
      this.sleepTime = option.sleepTime == 0 ? 1 : option.sleepTime;
    }
  }
</script>

<style lang="scss">
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;

    .sleep-complete {
      flex: 1;
      text-align: center;
      margin: 80rpx auto 0;
    }

    .sleep-massage {
      flex: 4;
      display: flex;
      flex-direction: column;
      width: 600rpx;
      height: 300rpx;
      box-shadow: 5rpx 5rpx 20rpx #aeadaf;
      margin: 80rpx auto;
      border-radius: 30rpx;
      position: relative;

      .user-info {
        position: absolute;
        top: -60rpx;
        left: 60rpx;

        .user-info-img {
          display: inline-block;
          background-color: #FFFFFF;
          padding: 5rpx;
          border-radius: 50%;
          text-align: center;
          margin-right: 40rpx;
          box-shadow: 3rpx 5rpx 3rpx #aeadaf;

          .img {
            display: block;
            width: 110rpx;
            height: 110rpx;
            border-radius: 50%;
          }
        }
      }

      .fall-asleep {
        padding-right: 150rpx;
        padding-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex: 1;
      }

      .wake-up {
        padding-right: 150rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex: 1;
        border-top: 1rpx solid #bdbbbe;
        border-bottom: 1rpx solid #bdbbbe;
      }

      .nap {
        padding-right: 150rpx;
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-around;
      }
    }

    .back-home {
      flex: 3;

      .btn {
        width: 400rpx;
        margin: 50rpx auto;
        padding: 10rpx;
        border-radius: 30rpx;
        text-align: center;
        background-image: linear-gradient(to right, #00d2fc, #39A8FD);
        box-shadow: 3rpx 4rpx 5rpx #bae6f9;
      }
    }
  }
</style>
